<template>
    <el-dialog :close-on-click-modal='false' title="屏蔽计划" top="10vh" :visible.sync="dialogVisible" @close="resetForm()" width="600px">
        <div class="font_line">
            <div class="font_16 color_01">添加屏蔽计划</div>
        </div>
        <el-select v-model="query" filterable remote reserve-keyword value-key="ad_id" placeholder="请输入计划ID搜索添加" style="width:100%" class="mg_t12 shield_el_select" popper-class="shield_select" :remote-method="remoteMethod" :loading="s_loading" @change="selectAweme">
            <template slot="prefix">
                <div class="aweme_icon" style="line-height:39px">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M12.0206 11.0782L14.4042 13.4612C14.6647 13.7217 14.6647 14.144 14.4043 14.4045C14.1438 14.665 13.7214 14.665 13.461 14.4044L11.0779 12.0208C10.0157 12.8723 8.69459 13.3354 7.33325 13.3335C4.02125 13.3335 1.33325 10.6455 1.33325 7.3335C1.33325 4.0215 4.02125 1.3335 7.33325 1.3335C10.6453 1.3335 13.3333 4.0215 13.3333 7.3335C13.3352 8.69483 12.8721 10.016 12.0206 11.0782ZM10.6833 10.5835C11.5293 9.71342 12.0018 8.54712 11.9999 7.3335C11.9999 4.75483 9.91125 2.66683 7.33325 2.66683C4.75459 2.66683 2.66659 4.75483 2.66659 7.3335C2.66659 9.9115 4.75459 12.0002 7.33325 12.0002C8.54687 12.0021 9.71318 11.5296 10.5833 10.6835L10.6833 10.5835Z" fill="#B4B7BD" />
                    </svg>
                </div>
            </template>
            <el-option v-for="item in shildOption" :key="item.ad_id" :label="item.name" :value="item.ad_id">
                <div class="plan_name">{{item.name}}</div>
                <div class="plan_id">计划ID:{{item.ad_id}}</div>
            </el-option>
        </el-select>

        <div class="has_check flexbox flexcenter flexbetween" v-if="hasCheck.length>0">
            <div class="has_ch_left">
                <span class="has_text">已选中{{hasCheck.length}}项</span>
                <span class="has_btn" @click="delComfirm(hasCheck)">删除</span>
            </div>
            <div class="close_check" @click="closeCheck">
                <img src="../../assets/img/close_check.svg" alt="">
            </div>
        </div>
        <div class="shilds_title flexbox flexcenter flexbetween" v-else>
            <div class="">已屏蔽计划</div>
            <el-input placeholder="请输入计划ID查找" size="small" style="width:216px" clearable @change="getDataList(1)" prefix-icon="el-icon-search" v-model="queryInfo.query"></el-input>
        </div>
        <div class="mg_t12" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <el-table :data="tableData" class="com_table" height="400px" :row-key="(row)=>{ return row.ad_id}" ref="tableRef" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" :reserve-selection="true">
                </el-table-column>
                <el-table-column prop="ad_id" label="计划 ID" width="180">
                </el-table-column>
                <el-table-column prop="name" label="计划名称">
                </el-table-column>
                <el-table-column prop="" label="操作" width="80">
                    <template slot-scope="scope">
                        <el-link type="danger" @click="delComfirm([scope.row.ad_id])" :underline="false">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination style="margin-top:20px" background layout="total, prev, pager, next" :current-page="queryInfo.page" :page-size="queryInfo.limit" @current-change="handleCurrentChange" :total="total">
        </el-pagination>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" class="el-button-width" @click="resetForm">关 闭</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            s_loading: false,
            dialogVisible: false,
            queryInfo: {
                query: "",
                page: 1,
                limit: 20,
            },
            tableData: [],
            shildOption: [],
            hasCheck: [],
            query: "",
            total: 0,
        };
    },
    created() {},
    methods: {
        getData() {
            this.dialogVisible = true;
            this.getDataList(1);
        },

        remoteMethod(query) {
            if (query !== "") {
                this.getShildList(query);
            } else {
                this.shildOption = [];
            }
        },

        // 选择达人
        selectAweme(ad_id) {
            this.query = "";
            this.$confirm("是否要添加?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then( () => {
                    this.addShild(ad_id);
                })
                .catch(() => {});
            
        },

        // 添加数据
        async addShild(ad_id) {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "autodrop/Configure/ignoreAdd",
                {
                    ad_id: ad_id,
                }
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.$message({
                    message: "添加成功",
                    type: "success",
                });
                this.getDataList(1);
            }
        },

        delComfirm(ad_id){
            this.$confirm("是否要删除数据?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then( () => {
                    this.delShild(ad_id)
                })
                .catch(() => {});
        },

        // 删除数据
        async delShild(ad_id) {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "autodrop/Configure/ignoreDel",
                {
                    ad_ids: ad_id,
                }
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.$message({
                    message: "删除成功",
                    type: "success",
                });
                this.$refs.tableRef.clearSelection();
                this.getDataList(1);
            }
        },

        // 搜索数据
        async getShildList(name) {
            this.s_loading = true;
            const { data: res } = await this.$http.post(
                "autodrop/Configure/ignoreSelect",
                {
                    query: name,
                }
            );
            if (res.code !== 200) {
                this.s_loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.s_loading = false;
                this.shildOption = res.data;
            }
        },

        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "autodrop/Configure/ignoreList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.total = res.data.count;
                this.tableData = res.data.list;
            }
        },

        // 表格选中
        handleSelectionChange(v) {
            this.hasCheck = v.map((item) => {
                return item.ad_id;
            });
        },

        // 关闭选中
        closeCheck() {
            this.$refs.tableRef.clearSelection();
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(this.planData, 1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.getDataList(val);
        },

        resetForm() {
            this.dialogVisible = false;
            this.queryInfo.query = ""
            this.$refs.tableRef.clearSelection();
            this.query = "";
            this.shildOption = [];
        },
    },
    components: {},
};
</script>


<style scoped>
.has_check {
    height: 45px;
}
.mg_t12 {
    margin-top: 12px;
}
.mg_t20 {
    margin-top: 20px;
}
.font_line {
    line-height: 22px;
}
.shilds_title {
    font-size: 16px;
    color: #17233d;
    margin-top: 20px;
}
/deep/ .shield_el_select .el-input__prefix {
    left: 10px;
    top: 3px;
}
.plan_name {
    color: #17233d;
    font-size: 14px;
    line-height: 20px;
}
.plan_id {
    font-size: 14px;
    line-height: 20px;
    margin-top: 5px;
}
</style>

<style>
.shield_select .el-select-dropdown__item {
    height: auto;
    line-height: unset;
    padding-top: 5px;
    padding-bottom: 5px;
}
</style>
